<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title="vdata.isAdd ? '新增学生' : '编辑学生'"
    width="50%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form
      ref="itemForm"
      :model="vdata.itemData"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      :rules="rules"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="学号" name="studentNo">
            <a-input v-model:value="vdata.itemData.studentNo" placeholder="请输入学号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="vdata.itemData.name" placeholder="请输入姓名" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Gender" name="gender">
            <a-select v-model:value="vdata.itemData.gender">
              <a-select-option value="M">男</a-select-option>
              <a-select-option value="F">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Age" name="age">
            <a-input-number v-model:value="vdata.itemData.age" placeholder="请输入Age" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="ClassName" name="className">
            <a-input v-model:value="vdata.itemData.className" placeholder="请输入ClassName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Major" name="major">
            <a-input v-model:value="vdata.itemData.major" placeholder="请输入Major" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="年级" name="grade">
            <a-select v-model:value="vdata.itemData.grade">
              <a-select-option value="2023">2023级</a-select-option>
              <a-select-option value="2022">2022级</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Phone" name="phone">
            <a-input v-model:value="vdata.itemData.phone" placeholder="请输入Phone" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Email" name="email">
            <a-input v-model:value="vdata.itemData.email" placeholder="请输入Email" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Address" name="address">
            <a-input v-model:value="vdata.itemData.address" placeholder="请输入Address" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Avatar" name="avatar">
            <a-input v-model:value="vdata.itemData.avatar" placeholder="请输入Avatar" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="EnrollmentDate" name="enrollmentDate">
            <a-date-picker v-model:value="vdata.itemData.enrollmentDate" placeholder="请输入EnrollmentDate" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Status" name="status">
            <a-select v-model:value="vdata.itemData.status">
              <a-select-option value="active">在读</a-select-option>
              <a-select-option value="graduated">已毕业</a-select-option>
              <a-select-option value="suspended">休学</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Remark" name="remark">
            <a-textarea v-model:value="vdata.itemData.remark" placeholder="请输入Remark" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="CreatedAt" name="createdAt">
            <a-date-picker v-model:value="vdata.itemData.createdAt" placeholder="请输入CreatedAt" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="UpdatedAt" name="updatedAt">
            <a-date-picker v-model:value="vdata.itemData.updatedAt" placeholder="请输入UpdatedAt" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false">
        <close-outlined /> 取消
      </a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOk">
        <check-outlined /> 保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Student } from "./Student";
import dayjs from 'dayjs';
import { apiStudentAdd, apiStudentEdit } from './api';

interface State {
  isAdd: boolean;
  isShow: boolean;
  confirmLoading: boolean;
  itemData: Partial<Student>;
  record: Partial<Student> | null;
}

const props = defineProps({
  callbackFunc: { type: Function, default: () => {} }
});

const vdata = reactive<State>({
  isAdd: true,
  isShow: false,
  confirmLoading: false,
  itemData: {},
  record: null
});

const itemForm = ref();

// 表单验证规则
const rules = {
  studentNo: [{ required: true, message: "请输入学号", trigger: "blur" }],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  gender: [{ required: true, message: "请输入性别 M-男 F-女", trigger: "blur" }],
  className: [{ required: true, message: "请输入班级", trigger: "blur" }],
  major: [{ required: true, message: "请输入专业", trigger: "blur" }],
  grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
  enrollmentDate: [{ required: true, message: "请输入入学日期", trigger: "blur" }],
  status: [{ required: true, message: "请输入状态", trigger: "blur" }],
  createdAt: [{ required: true, message: "请输入创建时间", trigger: "blur" }],
  updatedAt: [{ required: true, message: "请输入更新时间", trigger: "blur" }],
};

function show(record: Partial<Student> | null) {
  if (itemForm.value) {
    itemForm.value.resetFields();
  }

  vdata.isAdd = !record;
  vdata.itemData = {};
  vdata.confirmLoading = false;

  if (!vdata.isAdd && record) {
    vdata.record = record;
    vdata.itemData = {
      ...record,
      enrollmentDate: record.enrollmentDate ? dayjs(record.enrollmentDate) : undefined
    };
  }

  vdata.isShow = true;
}

function handleOk() {
  itemForm.value.validate().then(() => {
    vdata.confirmLoading = true;

    const submitData: Partial<Student> = {
      ...vdata.itemData,
      enrollmentDate: dayjs.isDayjs(vdata.itemData.enrollmentDate)
        ? vdata.itemData.enrollmentDate.format('YYYY-MM-DD')
        : vdata.itemData.enrollmentDate
    };

    const apiCall = vdata.isAdd
      ? apiStudentAdd(submitData)
      : apiStudentEdit(vdata.record?.id as number, submitData);

    apiCall
      .then(() => {
        vdata.isShow = false;
        vdata.confirmLoading = false;
        props.callbackFunc();
      })
      .catch(() => {
        vdata.confirmLoading = false;
      });
  });
}

defineExpose({ show });
</script>

<style scoped>
.drawer-btn-center {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>